<template>
  <div class="p-[15px] text-[14px]">
    <div class="flex items-center mb-[14px]">
      <div class="flex-[1]">保险内容</div>
      <div class="flex-[1] flex justify-between items-center">
        <div class="w-[80px] text-center">保险金额</div>
        <!-- <div class="w-[40px] text-center">保费</div> -->
      </div>
    </div>
    <div class="">
      <div class="flex items-center mb-[20px]" v-for="(item, index) in list">
        <div class="flex items-center flex-1 overflow-hidden">
          <!-- <div @click="clickCheck(item)" class="h-[15px] mr-[5px]" v-if="edit">
            <van-image
              v-if="item.check == 1 || item.check == 2"
              :src="getAssetsFile('insure/active.png')"
              width="15"
              height="15"
            ></van-image>
            <van-image
              v-else
              :src="getAssetsFile('insure/noactive.png')"
              width="15"
              height="15"
            ></van-image>
          </div> -->
          <div class="overflow-hidden w-[150px] text-ellipsis">
            <span class="text-ellipsis whitespace-nowrap overflow-hidden">{{
              item.title
            }}</span>
          </div>
        </div>
        <div class="flex flex-1 justify-between">
          <div class="relative flex-1">
            <div class="flex">
              <div
                @click="openPop(index)"
                class="w-[82px] h-[22px] border rounded-[4px] flex justify-between items-center px-[5px]"
              >
                <div :class="{ 'text-[#c8c9cc]': !edit }">
                  {{ item.money ? item.money : "请选择" }}
                </div>
                <van-icon name="arrow-down" />
              </div>

              <div class="ml-[5px] text-[13px]">
                {{ item.unit }}
              </div>
            </div>
          </div>

          <!-- <div class="w-[40px] text-center">
 
            <span v-if="index == 0">
              {{ item.price }}
            </span>
            <span v-else>
              {{ "0.00" }}
            </span>
          </div> -->
        </div>
      </div>
      <!-- 保费 -->
      <div class="flex items-center mb-[20px]">
        <div class="flex items-center flex-1 overflow-hidden">
          <div class="overflow-hidden w-[150px] text-ellipsis">
            <span class="text-ellipsis whitespace-nowrap overflow-hidden"> 保费 </span>
          </div>
        </div>
        <div class="flex flex-1 justify-between">
          <div class="relative flex-1">
            <div class="flex text-red-500">
              {{ personCost.toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
      <div class="flex items-center mb-[20px]">
        <div class="flex items-center flex-1 overflow-hidden">
          <div class="overflow-hidden w-[150px] text-ellipsis">
            <span class="text-ellipsis whitespace-nowrap overflow-hidden"> 加费 </span>
          </div>
        </div>
        <div class="flex flex-1 justify-between">
          <div class="relative flex-1">
            <div class="flex">
              <div
                class="w-[82px] h-[22px] border rounded-[4px] flex justify-between items-center px-[5px]"
              >
                <div :class="{ 'text-[#c8c9cc]': !edit }">
                  <input
                    class="w-[73px] h-[20px] bg-[white]"
                    :disabled="!edit"
                    v-model="param!.add_price"
                    @keyup="inputChange1"
                  />
                </div>
                <!-- <van-icon name="arrow-down" /> -->
              </div>
            </div>
          </div>

          <!-- <div class="w-[40px] text-center">
            {{
              Number(add_price!.add_price ? add_price!.add_price : 0)?.toFixed(
                2
              )
            }}
          </div> -->
        </div>
      </div>
    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="请选择"
        :columns="pickerData"
        @confirm="onConfirm"
        :columns-field-names="{ text: 'name' }"
        @cancel="show = false"
      />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
// import getAssetsFile from "@/utils/getImageurl.ts";
import { defineProps, watchEffect, ref, defineExpose, defineEmits } from "vue";
// import { getPrice } from "@/utils/api";
// import { useRoute } from "vue-router";

const props = defineProps({
  duty: { type: Array },
  start_time: { type: String as any },
  end_time: { type: String },
  edit: { type: Boolean },
  param: {
    type: Object,
  },
  fananCost: {}, //方案保费
  personCost: { type: Number, default: 0 },
});
const emit = defineEmits(["onConfirm", "inputChange1"]);
const fananCost = ref();
const pickerData = ref([] as any);
const pickIndex = ref(); //点击的下标
const pickerIndex = ref(0); //选中的下标
const show = ref(false);

const list = ref([] as any[]);
// const route = useRoute();
watchEffect(() => {
  if (props.duty) {
    // if (sessionStorage.getItem("dd_ccyqx")) {
    //   list.value = JSON.parse(sessionStorage.getItem("dd_ccyqx") as string).duty;
    //   fananCost.value = list.value[0].price;
    //   console.log(123123);

    //   return;
    // }
    list.value = props.duty;
    fananCost.value = list.value[0].price;
  }
});
const inputChange1 = () => {
  emit("inputChange1", list.value);
};
// const clickCheck = (item: any) => {
//   //0是未选中 1是已选中 2是选中不能修改
//   if (item.check == 0) {
//     item.check = 1;
//   } else if (item.check == 1) {
//     item.check = 0;
//   }
// };

// const changeInput = async (_: string | number, index: number) => {
//   let param = {
//     id: route.query.id,
//     start_time: props.start_time,
//     end_time: props.end_time,
//     money: list.value[index].money,
//   };

//   const res = await getPrice(param);
//   list.value[index].price = res.msg;
//   console.log(list.value);
// };
const onConfirm = (v: any) => {
  list.value[pickIndex.value].money = v.selectedOptions[0].name;
  list.value[pickIndex.value].price = v.selectedOptions[0].value;
  show.value = false;

  pickerIndex.value = v.selectedIndexes[0];
  let index = v.selectedIndexes[0]; //选中的下标
  //选择方案
  if (pickIndex.value == 0) {
    // list.value[1].price = "";
    // list.value[1].money = "";

    // list.value[1].data.forEach((item: any, i: number) => {
    //   if (i == index && index <= 1) {
    //     item["disabled"] = false;
    //     list.value[1].money = item.name;
    //   } else if (index > 1) {
    //     item["disabled"] = true;
    //     list.value[1].price = "300";
    //     list.value[1].money = "200";
    //   } else {
    //     item["disabled"] = true;
    //   }
    // });

    emit("onConfirm", index);
  }
};
const openPop = (index: number) => {
  if (!props.edit) return;
  // list.value[index].data.forEach((item: any, i: number) => {
  //   item["disabled"] = false;
  // });
  pickerData.value = list.value[index].data;

  pickIndex.value = index;
  show.value = true;
  if (index == 1 || index == 2) {
    pickerData.value.forEach((item: any, i: number) => {
      if (i == pickerIndex.value) {
        item.disabled = false;
      } else {
        item.disabled = true;
      }
    });
  }
};
defineExpose({
  list,
});
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 12px !important;
}
</style>
